import { readWeChatConfig } from '@/services/User';
import { getDatabase } from '@/services/DataBase';
import type { ProColumns, ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Flex, Modal, Progress, Result, message, Divider } from 'antd';
import React, { useState, useRef } from 'react';

// 定义解密工具组件
const DecryptTool: React.FC = () => {
  // 用于管理解密进度的状态
  const [decryptProgress, setDecryptProgress] = useState<{ [key: number]: number }>({});
  // 用于控制解密模态框的显示状态
  const [isDecryptModalOpen, setIsDecryptModalOpen] = useState(false);
  // 用于跟踪当前正在解密的项
  const [decryptingIds, setDecryptingIds] = useState<{ [key: number]: boolean }>({});
  // 用于控制详情模态框的显示状态
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
  // 用于存储当前选中的微信 ID
  const [wxId, setWxId] = useState<string>();
  // 用于 ProTable 的操作引用
  const ref = useRef<ActionType>();

  // 点击详情按钮时调用，打开详情模态框
  const handleDetail = (record: WeChatConfig) => {
    setIsDetailModalOpen(true);
    setWxId(record.wxId); // 设置当前选中的微信 ID
    ref.current?.reload(); // 重新加载表格数据
  };

  // 确认关闭详情模态框的回调函数
  const handleDetailOk = () => {
    setIsDetailModalOpen(false);
  };

  // 取消关闭详情模态框的回调函数
  const handleDetailCancel = () => {
    setIsDetailModalOpen(false);
  };

  // 确认关闭解密模态框的回调函数
  const handleDecryptOk = () => {
    setIsDecryptModalOpen(false);
  };

  // 取消关闭解密模态框的回调函数
  const handleDecryptCancel = () => {
    setIsDecryptModalOpen(false);
  };

  // 点击解密按钮时调用，发起解密请求
  const handleDecrypt = (record: WeChatConfig) => {
    // 更新解密中的状态
    setDecryptingIds((prev) => ({ ...prev, [record.pid]: true }));

    // 构造解密请求的参数
    const params = new URLSearchParams({
      pid: record.pid.toString(),
      basePath: record.basePath,
      wxId: record.wxId,
      nickname: record.nickname,
      version: record.version,
      account: record.account,
      mobile: record.mobile,
    }).toString();

    // 创建一个 SSE（服务器发送事件）连接
    const eventSource = new EventSource(`/api/database/decrypt?${params}`);

    // 接收服务器发送的消息
    eventSource.onmessage = function (event) {
      const data = JSON.parse(event.data); // 解析数据
      if (data.success) {
        // 更新解密进度
        setDecryptProgress((prev) => ({ ...prev, [record.pid]: data.data.currentProgress }));
        // 如果解密完成，打开模态框并更新状态
        if (data.data.currentProgress === 100) {
          setIsDecryptModalOpen(true);
          setDecryptingIds((prev) => ({ ...prev, [record.pid]: false }));
        }
      } else {
        // 显示错误信息并更新状态
        message.error(data.errorMessage);
        setDecryptingIds((prev) => ({ ...prev, [record.pid]: false }));
      }
    };

    // 处理解密过程中发生的错误
    eventSource.onerror = function () {
      eventSource.close(); // 关闭事件源
      setDecryptingIds((prev) => ({ ...prev, [record.pid]: false }));
    };
  };

  // 定义详情模态框的表格列配置
  const columnsDetail: ProColumns<DatabaseItem>[] = [
    {
      title: '文件地址', // 列标题
      dataIndex: 'filePath', // 数据索引字段
      align: 'start', // 对齐方式
      search: false, // 禁用搜索
    },
    {
      dataIndex: 'fileSize', // 数据索引字段
      title: '文件大小', // 列标题
      search: false, // 禁用搜索
      align: 'start', // 对齐方式
    },
  ];

  // 定义主表格的列配置
  const columns: ProColumns<WeChatConfig>[] = [
    // 进程 ID 列
    {
      title: '进程ID',
      dataIndex: 'pid',
      align: 'center',
      search: false,
    },
    // 微信 ID 列
    {
      dataIndex: 'wxId',
      title: '微信ID',
      search: false,
      align: 'center',
    },
    // 基址列
    {
      dataIndex: 'baseAddress',
      title: '基址',
      search: false,
      align: 'center',
    },
    // 版本号列
    {
      dataIndex: 'version',
      title: '版本号',
      search: false,
      align: 'center',
    },
    // 文件目录列
    {
      dataIndex: 'basePath',
      title: '文件目录',
      search: false,
      ellipsis: true,
      align: 'center',
    },
    // 昵称列
    {
      dataIndex: 'nickname',
      title: '昵称',
      search: false,
      align: 'center',
    },
    // 账号列
    {
      dataIndex: 'account',
      title: '账号',
      search: false,
      align: 'center',
    },
    // 手机号列
    {
      dataIndex: 'mobile',
      title: '手机号',
      search: false,
      align: 'center',
    },
    // 解密进度列
    {
      dataIndex: 'basePath1',
      title: '解密进度',
      search: false,
      align: 'center',
      render: (_, record) => (
        <Progress
          type="circle"
          strokeColor={{
            '0%': '#108ee9',
            '100%': '#87d068',
          }}
          trailColor="#D3D3D3"
          percent={decryptProgress[record.pid] || 0}
          size={40}
        />
      ),
    },
    // 操作列
    {
      title: '操作',
      align: 'center',
      search: false,
      render: (_, record) => (
        <Flex justify="center">
          <Button
            type="link"
            size="small"
            onClick={() => handleDecrypt(record)}
            disabled={decryptingIds[record.pid]}
          >
            {decryptingIds[record.pid] ? '解密中' : '解密'}
          </Button>
          <Divider type="vertical" />
          <Button size="small" type="link" onClick={() => handleDetail(record)}>
            详情
          </Button>
        </Flex>
      ),
    },
  ];

  // 返回组件的渲染内容
  return (
    <PageContainer>
      <ProTable<WeChatConfig>
        columns={columns}
        search={false}
        cardBordered={{
          search: true,
          table: true,
        }}
        request={async () => {
          try {
            return readWeChatConfig(); // 请求微信配置数据
          } catch (error) {
            console.error(error);
            return [];
          }
        }}
        revalidateOnFocus={false}
        rowKey="pid"
        options={false}
        pagination={false}
        headerTitle="微信列表"
      />
      <Modal open={isDecryptModalOpen} onOk={handleDecryptOk} onCancel={handleDecryptCancel} footer={null}>
        <Result
          status="success"
          title="恭喜你，解密微信数据库成功!"
          subTitle="数据同步已经完成。为确保最新信息显示，请重新加载页面。"
          extra={[
            <Button type="primary" key="refresh" onClick={() => window.location.reload()}>
              刷新
            </Button>,
            <Button key="close" onClick={handleDecryptOk}>
              关闭
            </Button>,
          ]}
        />
      </Modal>

      <Modal open={isDetailModalOpen} onOk={handleDetailOk} onCancel={handleDetailCancel} width={1000} footer={null}>
        <ProTable<DatabaseItem>
          columns={columnsDetail}
          search={false}
          actionRef={ref}
          cardBordered={{
            search: true,
            table: true,
          }}
          request={async () => {
            try {
              return getDatabase({ wxId: wxId }); // 请求数据库详情
            } catch (error) {
              console.error(error);
              return [];
            }
          }}
          revalidateOnFocus={false}
          rowKey="filePath"
          options={false}
          pagination={false}
          headerTitle="数据库列表"
        />
      </Modal>
    </PageContainer>
  );
};

// 导出解密工具组件
export default DecryptTool;
